{% extends 'layout/base.html' %}
{% load static %}

{% block js %}
    <script type="text/javascript">
        $(function () {
            // 用户注册
            $('#btnSubmit').click(function () {
                $('.error-msg').empty();
                // 获取用户数据，简单校验后发送到后台
                params = $('#regForm').serialize();
                $.ajax({
                    url: "{% url 'blog:register' %}",
                    type: 'post',
                    data: params,
                    dataType: 'json'
                }).done(function (data) {
                    if (data.code === 200) {
                        location.href = '{% url "blog:login" %}';
                    } else {
                        $.each(data.msg, function (key, value) {
                            $('#id_' + key).next().text(value[0])
                        });
                    }
                }).fail(function () {
                    console.log("网络超时");
                })
            });
        });
    </script>
{% endblock js %}
{% block css %}

    <link rel="stylesheet" href="{% static 'css/blog/account.css' %}">

{% endblock css %}

{% block title %}注册{% endblock title %}

{% block navbar %}
    <nav class="navbar navbar-inverse">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                        data-target="#bs-example-navbar-collapse-1" aria-expanded="false">

                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="{% url 'blog:index' %}">Home</a>
            </div>
        </div>
    </nav>
{% endblock navbar %}

{% block content %}
    <div class="account">
        <div class="title">用户注册</div>
        <br/>
        <form class="form-horizontal" method="post" id="regForm" novalidate>
            {% csrf_token %}
            {% for field in form %}
                <div class="form-group">
                    <label class="col-sm-2 control-label" for="{{ field.id_for_label }}">{{ field.label }}</label>
                    <div class="col-sm-10">
                        {{ field }}
                        <span class="error-msg"></span>
                    </div>
                </div>
            {% endfor %}

            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <button type="button" id="btnSubmit" class="btn btn-primary">注册</button>
                </div>
            </div>
        </form>
    </div>
{% endblock content %}